<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="cartStyle.css" />
    <style>
        input[disabled]{
            cursor: not-allowed;
        }
    </style>
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="dd_logo.jpg"><span id="closeBtn">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1" ><input type="button" name="plus" value="+"></li>
            <li id="price0">¥21.90</li>
            <li><p id="shou">移入收藏</p><p id="del">删除</p></li>
        </ul>
        <ul>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li>
            <li id="price1">¥24.00</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span id="jiesuan">结 算</span></li>
        </ol>
    </div>
</div>
</body>
<script>
    let plus = document.getElementsByName("plus");
    let minus = document.getElementsByName("minus");
    let amount = document.getElementsByName("amount");
    let prices = document.getElementsByName("price");
    let totals = document.getElementById("totalPrice");
    let jiesuan=document.getElementById("jiesuan");

    jiesuan.onclick=function () {
        let div=document.createElement("div");
        let cartList=document.getElementsByClassName("cartList")[0];
        let pr1 = cartList.firstElementChild.firstElementChild.nextElementSibling.nextElementSibling.innerHTML;
        let pr2 = cartList.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.innerHTML;
        let total = cartList.lastElementChild.firstElementChild.innerHTML = totals.innerHTML;
        div.style.width=800+"px";
        div.style.height=80+"px";
        div.style["margin-left"]=170+"px";
        div.style["border-width"]=1+"px";
        div.style["border-style"]="solid";
        div.style["border-color"]="red";
        div.style["font-size"]=14+"px";
        div.innerHTML="您本次购买的商品如下:<br/>白岩松:白说:"+pr1+"<br/>岛上书店:"+pr2+"<br/>商品共计:"+total+"";
        document.body.appendChild(div);
    };

    function f1() {
        var total=0;
        for(let i=0;i<amount.length;i++){
            var price=document.getElementById("price"+i);
            var proPrice=parseFloat(price.innerHTML.substring(1));
            total+=proPrice;
        }
        totalPrice.innerHTML="￥"+total;
    }
    f1();
    function f(i) {
        var p=prices[i].value;
        var a=amount[i].value;
        var proPrice=(p*a).toFixed(2);
        var price=document.getElementById("price"+i);
        price.innerHTML="￥"+proPrice;
        f1();
    }
    for(let i=0;i<plus.length;i++){
        plus[i].onclick=function () {
            amount[i].value++;
            if(amount[i].value>1){
                minus[i].removeAttribute("disabled")
            }
            f(i);
        };
        minus[i].onclick=function () {
            if(amount[i].value>1){
                amount[i].value--;
            }
            if(amount[i].value==1){
                this.disabled="disabled";
            }
            f(i);
        }
    }
    
    closeBtn.onclick = function () {
        close();
    };
    jiesuan.ondblclick = function () {
        if (confirm("您本次购买的商品信息如下:\n\n商品名称:白岩松:白说、岛上书店;\n商品数量:2件\n商品总计:"+totalPrice.innerHTML+"元；\n运费:0元;\n\n请确认以上信息是否有误！！！")) {
            alert("您的订单已提交");
        }
    };
    shou.onclick = function () {
        if (confirm("移入收藏后，将不在购物车显示，是否继续操作？")) {
            alert("移入收藏成功");
        }
    };
    del.onclick = function () {
        if (confirm("确定删除该商品吗？")) {
            alert("删除成功");
        }
    }
</script>
</html>